/**
 * 分享css3d添加标签的使用
 */
import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';
import {CSS3DRenderer,CSS3DSprite} from 'three/examples/jsm/renderers/CSS3DRenderer'
const container = document.querySelector("#app");
const cssContainer = document.querySelector('#css2d')
const {clientWidth,clientHeight} = container;
let scene,camera,renderer,controls,css3dRenderer;

init();
animate();
function init() {
    // 场景
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0x000000);
    // 透视相机
    camera = new THREE.PerspectiveCamera(60,clientWidth/clientHeight,0.0001,3000);
    camera.position.set(0,3,2);
    camera.lookAt(scene.position);
    // renderer
    renderer = new THREE.WebGLRenderer({alpha:true,antialias: true});
    renderer.setSize(clientWidth,clientHeight);
    container.appendChild(renderer.domElement);
    // 轨道控制器
    controls = new OrbitControls(camera,renderer.domElement)
    // 初始化css3drenderer
    css3dRenderer = new CSS3DRenderer();
    css3dRenderer.setSize(clientWidth,clientHeight);
    // css3dRenderer.domElement.style.position = 
    cssContainer.appendChild(css3dRenderer.domElement)
    // 后续的操作
    addBox();
    addMarker();
}
// 让webgl按照帧率渲染
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene,camera);
    css3dRenderer.render(scene,camera)
}

function addBox () {
    let boxGeo = new THREE.BoxGeometry(1,1,1,30,30,30);
    let boxMat = new THREE.PointsMaterial({color: 0x51efe4,size: 0.01});
    let boxMesh = new THREE.Points(boxGeo,boxMat);
    scene.add(boxMesh);
}
function addMarker () { 
    let markerDom = document.createElement('div');
    markerDom.innerText = '我是精灵标签';
    markerDom.style.fontSize = "12px"
    markerDom.style.fontFamily = "楷体"
    markerDom.style.color = "red"
    markerDom.classList.add('default_dom')
    const marker = new CSS3DSprite(markerDom);
    scene.add(marker);
    marker.scale.set(0.01,0.01,0.01);
    marker.position.set(1,0.5,0)
}